<template>
    <div class="contain" v-loading="loading">
        <tz-breadcrumb  :pathArr='[{"name": "场景管理"},{"name": "餐厅管理", "url": "/home"},{"name": "餐桌二维码管理", "url": "/desk-code"}]'></tz-breadcrumb>
        <div class="section-one-border">
            <el-row :gutter="10" class="section-one" style="margin-left:0px;margin-right:0px">
                <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="left">
                    <span>餐桌二维码列表</span>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                    <!-- <div class="grid-content text-right add-btn" @click="edit(1,'','')">
                        <i class="el-icon-plus"></i>添加厨房</div> -->
                    
                </el-col>
            </el-row>
           
        </div>
        <!-- table -->
        <div class="main-contain">
            <div  class="s-list-title text-center" v-if="noInfo">----暂无餐桌二维码列表----</div>
            <div v-if="codeList != ''">
                <div class="desk-code-content">
                <ul>
                    <li v-for="item in codeList" :key="item.id">
                        <a>
                        <img :src ="imgUrl + item.qrcode"  :id="[item.qrcode]"/>
                        <!-- <tz-qrcode class="qrcodeDemo" :data='scope.row.mergepayqr' :width='150'></tz-qrcode> -->
                        <p>桌号{{item.desk_number}}</p>
                        <!-- <div class="upload-txt" @click="downloadImg(item.qrcode,item.desk_number)">
                            下载
                        </div> -->
                        </a>
                    </li>
                </ul>
                </div>
                <div class="text-center page-border">
                    <!-- <div class="page-border-size">每页显示{{size}}条</div> -->
                <el-pagination v-if="total > size"
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :page-size="size"
                :total="total">
                </el-pagination>
                </div>
            </div>
            
        </div>
        
        
    </div>
</template>
<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb'
// 获取所有ordecode，组成新的字符串
        //   var menuArr=new Array();
        //   that.menuList.forEach(function (ele) {
        //     menuArr.push(ele.order_code); 
        //   })
        //   var menuOrdercodeStr = menuArr.join(",");
export default {
    components: {
        'tz-breadcrumb': tzBreadcrumb,
    },
    data () {
      return {
          page:1,
          size:50,
          total:0,
          imgUrl:api.imgUrl,
          codeList:[],
          loading:false,
          noInfo:false  
      }
    },
    methods:{
        downloadImg(qrcode,name){
            var img = document.getElementById(qrcode);   // 获取要下载的图片
            console.log(img);
            var url = this.imgUrl + qrcode;                              // 获取图片地址
            var a = document.createElement('a');            // 创建一个a节点插入的document
            var event = new MouseEvent('click')             // 模拟鼠标click点击事件
            a.download = name                    // 设置a节点的download属性值
            a.href = url;                                   // 将图片的src赋值给a节点的href
            a.dispatchEvent(event);                       // 触发鼠标点击事件
        },
        // downloadImg(imgsrc, name) {//下载图片地址和图片名
        // let image = new Image();
        // // 解决跨域 Canvas 污染问题
        // image.setAttribute("crossOrigin", "anonymous");
        // image.onload = function() {
        //     let canvas = document.createElement("canvas");
        //     canvas.width = 200;
        //     canvas.height = 200;
        //     let context = canvas.getContext("2d");
        //     context.drawImage(image, 0, 0, 200, 200);
        //     let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        //     let a = document.createElement("a"); // 生成一个a元素
        //     let event = new MouseEvent("click"); // 创建一个单击事件
        //     a.download = name || "photo"; // 设置图片名称
        //     a.href = url; // 将生成的URL设置为a.href属性
        //     a.dispatchEvent(event); // 触发a的单击事件
        // };
        // image.src = imgsrc;
        // },
        getDeskList () {
            let that = this;
            that.loading = true;
            http.get(api.deskList, {
                restaurant_id: this.$route.query.id,
                seller_id:localStorage.getItem("seller_id"),
                current_page:that.page,
                perpage:that.size
            }, (res) => {
               console.log(res);
               that.loading = false;
               if(res.data[0].data == '') {
                this.noInfo = true;
               } else{
                this.noInfo = false;
               }
               if(res.code == '10001') {
                 that.codeList = res.data[0].data;
                 that.total = res.data[0].total;
               } else {
                //  console.log(res.msg);
               }
            }, () => {
            console.log('网络错误');
            });
        },
        handleCurrentChange (val) {
            this.page = val;
            this.getDeskList();
        },
    
    },
    mounted ()  {
     this.getDeskList ();
  
    },
    
    
}
</script>
<style scoped>
.section-one {
    background: #fff;
    line-height: 50px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-size: 16px;
    margin-top: 10px;   
}
.section-one,.main-contain{
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    margin-top:10px;
}
.main-contain{
    padding:20px;
    box-sizing: border-box
}
.section-one .left{
    font-size:16px;
    font-weight: bold;
}
.desk-code-content  ul{
    display: flex;
    flex-wrap: wrap;
}
.desk-code-content  ul li{
    position: relative;
    width:220px;
    height:250px;
    padding:10px;
    box-sizing: border-box;
    margin:0 0px 15px 0;
    text-align:center;
    
}
.desk-code-content  ul li img{
    width:200px;
    height:200px;
}
.desk-code-content  ul li p {
    line-height:30px;
    color:#333;
    font-size:16px;
}
.upload-txt{
    width:100px;
    height:40px;
    line-height:40px;
    color:#fff;
    font-size:14px;
    position: absolute;
    top:10px;
    right:10px;
    background: #FF6F2E;
    cursor: pointer;
     display: none;
}
.desk-code-content ul li  a:hover .upload-txt{
    display: block;
}
.page-border{
    margin-top:40px;
    position: relative;
    padding-left:100px;
    box-sizing: border-box
}
.page-border-size{
    position: absolute;
    left:0px;
    top:0px;
    line-height:30px;
    font-size:14px;
    color:#666;
    width:90px;
}
.s-list-title {
  color:#999;
  margin-bottom:5px;
  font-size:14px;
  width:100%
}
</style>
